﻿@using Models;
@model List<lotterylog>
@{
    ViewBag.Title = "抽奖";
    Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
    List<string> imgs = ViewBag.Imgs;
}
<link href="~/Areas/Admin/HTML/css/screen.css" rel="stylesheet" />
<div class="screen-content" data-imgs="@Common.JsonHelper.JsonSerializer(imgs)">
    <div class="screen-header">
        <h1>抽奖</h1>
        <h2>非我莫属PK赛</h2>
        <img src="~/Areas/Admin/HTML/screenimgs/QRcode.jpg?v=1" onclick="showImg(this)" />
    </div>
    <div class="lottery-content">
        <div class="lottery-control">
            <div class="lottery-header">
                <img src="~/Areas/Admin/HTML/screenimgs/gift.png" />现场抽奖
            </div>
            <div class="animate-box">
                <img src="~/Areas/Admin/HTML/screenimgs/lottery-default.jpg" id="avator-img" />
            </div>
            <div class="lottery-start">
                <div class="lottery-select">
                    <label>一次抽取</label>
                    <select id="count" name="count">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                    </select>
                    <span>人</span>
                </div>
                <div class="lottery-btn-box">
                    <button class="lottery-btn" type="button" onclick="StartLottory(this)" data-islottery="false">开始抽奖</button>
                </div>
            </div>
        </div>
        <div class="lottery-list-content">
            <div class="lottery-list-bar"></div>
            <div class="lottery-list">
                <div id="ui-pager" style="height: 89%;overflow-y: auto;">
                    @Html.Partial("_Lottery", Model)
                </div>
                <div class="lottery-btn-box">
                    <button class="lottery-btn" type="button" onclick="ClearLottery(this)">重新抽奖</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    //var imgs = [
    //"/Areas/Admin/HTML/screenimgs/avator-1.png",
    //"/Areas/Admin/HTML/screenimgs/avator-2.jpg",
    //"/Areas/Admin/HTML/screenimgs/avator-3.png",
    //"/Areas/Admin/HTML/screenimgs/avator-4.jpg",
    //"/Areas/Admin/HTML/screenimgs/avator-5.jpg",
    //"/Areas/Admin/HTML/screenimgs/avator-6.jpg",
    //];
    var imgs = [];
    $(function () {
        imgs = $(".screen-content").data("imgs");
    });
    var lock = false;
    var timer;
    var self;
    function StartLottory(target) {
        self = $(target);
        var img = $("#avator-img");
        if (lock) {
            GetLottery(img);  //发起抽奖请求
        } else {
            lock = true;
            self.text("停止抽奖");
            timer = setInterval(function () {
                var num = diu_Randomize(0, imgs.length);
                img.attr("src", imgs[num]);
            }, 50);
        }
    }

    //生成随机数
    function diu_Randomize(b, e) {
        if (!b && b != 0 || !e) { return "?"; }
        return Math.floor((Math.random() * e) + b);
    }

    //发起抽奖请求
    var ajaxLock = false;
    function GetLottery(img) {
        if (ajaxLock) {
            return false;
        }
        else {
            ajaxLock = true;
            var count = parseInt($("#count").val());
            if (count <= 0 || isNaN(count)) {
                count = 1;
            }
            $.post("/admin/screen/getlottery", { count: count }, function (result) {
                if (result.status) {
                    refreshLotteryList(img);
                    alert(result.data);
                }
                else {
                    ajaxLock = false;
                    self.text("开始抽奖");
                    clearInterval(timer);
                    img.attr("src", "/Areas/Admin/HTML/screenimgs/lottery-default.jpg");
                    lock = false;
                    alert(result.errmsg);
                    return false;
                }
            });
        }
    }

    //刷新中奖列表
    function refreshLotteryList(img) {
        $.get("/admin/screen/lottery", null, function (data) {
            ajaxLock = false;
            if (data.length > 0) {
                $("#ui-pager").empty().append(data);
            }
            self.text("开始抽奖");
            clearInterval(timer);
            img.attr("src", "/Areas/Admin/HTML/screenimgs/lottery-default.jpg");
            lock = false;
            return false;
        });
    }
    //清除中奖数据
    var clearLock = false;
    function ClearLottery(target) {
        if (clearLock) {
            return false;
        }
        else {
            clearLock = true;
            $(target).text("正在清除...");
            $.post("/admin/screen/clearlottery", { isClear: true }, function (result) {
                $(target).text("重新抽奖");
                if (result.status) {
                    var img = $("#avator-img");
                    refreshLotteryList(img);
                    alert(result.data);
                    clearLock = false;
                } else {
                    alert(result.errmsg);
                    clearLock = false;
                }
            });
        }
    }
    function showImg(target) {
        var img = $(target).attr("src");
        layer.open({
            type: 1,
            offset: '20px',
            title: false,
            skin: 'layui-layer-demo', //样式类名
            closeBtn: 1, //不显示关闭按钮
            shadeClose: true, //开启遮罩关闭
            area: ['700px', '700px'],
            content: '<img src="' + img + '" width="100%"/>'
        });
    }
</script>